<template>
  <p class="footer-line"></p>
  <div class="common-layout">
    <el-container>
      <el-footer>
        <div class="input_email">
          <h3>Get updates on LinStore!</h3>
          <form>
            <div class="form-input">
              <input v-model="email" required="required" placeholder="Please input your Email">
              <button type="submit" class="el-button--success"><el-icon><Plus /></el-icon></button>
            </div>
          </form>
        </div>

        <div class="information">
          <ul v-if="informationData.length > 0" >
            <li v-for="(item,index) in informationData" :key="index" v-if="ishow">
              <h4>{{item.title}}</h4>
              <div class="information-span" v-for="i in item.context" :key="i.id">
                <a href="#">{{ i }}</a>
              </div>
            </li>
          </ul>
        </div>

        <div class="pay">
          <div class="pay-img">
            <img src="https://staticmedia.remo-ai.com/image/default/5F8A11B688AD4EF8BD3B51BEF4CC5774-6-2.png" alt="">
            <img src="https://staticmedia.remo-ai.com/image/default/29630EA0184F4E399E254D948BE1EFE4-6-2.png" alt="">
            <img src="https://staticmedia.remo-ai.com/image/default/FCBE35434C6D4E119EF22AD1B397C741-6-2.png" alt="">
            <img src="https://staticmedia.remo-ai.com/image/default/E0207EBA093748989B5C55888158C1D3-6-2.png" alt="">
            <img src="https://staticmedia.remo-ai.com/image/default/009BBE4809DD4F24A36C51BA632EC55D-6-2.png" alt="">
            <img src="https://staticmedia.remo-ai.com/image/default/8F558138773B471590CC4B3880AAD428-6-2.png" alt="">
            <img src="https://staticmedia.remo-ai.com/image/default/478B63D46E6849EB85B3E76AC6189178-6-2.png" alt="">
            <img src="https://staticmedia.remo-ai.com/image/default/C1DB097C9E79433299AFF61B10635B20-6-2.png" alt="">
            <img src="https://staticmedia.remo-ai.com/image/default/8346B9CBAC0C4BE39F59D8F96BEFBF11-6-2.png" alt="">
          </div>

          <p></p>
          <span>Copyright © 2024 OBSBOT All Rights Reserved.</span>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>


<script>
import { ref, toRefs,reactive,onMounted } from 'vue';
import axios from 'axios'
import Collapse from '../../components/Collapse.vue';
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
  export default{
    name:'Footer',
    setup(){
      const data = reactive({
        email: ref(null),
        url: {
            titel: "https://api.starbucket.xyz/information",

        },
        informationData: ref([]),
        ishow: ref(true)
      })


      const getInformation = async () =>{
        const response = await axios.get(data.url.titel)
        data.informationData = response.data
      }


      onMounted(() => {
        getInformation()
      })

      return{
        ...toRefs(data),
        getInformation
      }
    },
    components: {
      Collapse
    }
  }
</script>


<style scoped>

  .footer-line {
    height: 1px;
    background: #999;
    margin-bottom: 100px;
    opacity: 0.2;
  }
  /* * {outline: auto;} */
  .common-layout {
    position: relative;
    width: 100%;
    height: 892px;

  }
  .input_email {
    position: absolute;
    width: 400px;
    height: auto;
    left: 740px;
  }

  .input_email h3 {
    font-size: 30px;
  }

  .input_email input {
    height: 55px;
    width: 380px;
    margin-top: 20px;
    border: 0;
    background-color: whitesmoke;
  }

  .el-button--success {
    position: absolute;
    right: -32px;
    top: 115px;
    height: 56.5px;
    background: rgb(156, 207, 156);
    width: 56px;
    border: 0;
    
  }

  .el-icon {
    font-size: 35px;
  }

  .form-input {
    margin-left: -32px;
  }

  .form-input input::placeholder {
    text-align: center;
    font-size: 15px;
    color: gray;
  }

  .information {
    position: absolute;
    width: 100%;
    height: 600px;
    background:whitesmoke;
    bottom: 0;
  }

  .information ul {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: auto;
  }
  .information ul li,
  .pay li {
    list-style: none;
  }

  .information ul li:nth-child(1) {
    margin-top: -33px;
  }

  .information ul li:nth-child(3) {
    margin-top: 30px;
  }

  .information ul li:nth-child(4),
  .information ul li:nth-child(5) {
    margin-top: -109px;
  }

  .information ul li:nth-child(6) {
    margin-top: -73px;
  }


  .information-span {
    display: flex;
    flex-direction: column; /* 将子元素垂直排列 */
  }

  .information-span h4 {

    top: 10px;
  }

  .information-span a {
    margin-top: 20px;
    font-size: 14px;
    text-decoration: none;
    color:  gray;
  }

  .information-span a:hover {
    color: red;
  }

  .pay {
    position: absolute;
    width: 90%;
    bottom: 70px;
    left: 130px;
  }

  .pay-img img {
    height: 30px;
    width: 60px;
    margin-right: 10px;
  }

  .pay p {
    width: 100%;
    height: 1px;
    background: gray;
  }

  .pay span {
    font-size: 10px;
  }


</style>
